<style>
    select{height: 38px;width:100%;border:1px solid #e6e6e6;padding:5px;}
</style>

<div class="layui-form-pane" style="padding: 20px;">
    <div class="layui-form-item">
        <label class="layui-form-label">权限名称</label>
        <div class="layui-input-block">
            <input type="text" class="layui-input" name="name" autocomplete="off">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">描述</label>
        <div class="layui-input-block">
            <input type="text" class="layui-input" name="description" autocomplete="off">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">权限值</label>
        <div class="layui-input-block">
            <input type="text" class="layui-input" name="value" autocomplete="off">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">父级权限</label>
        <div class="layui-input-block">
            <select name="powers">

            </select>
        </div>
    </div>
    <div class="layui-form-item">
        <button id="add" class="layui-btn layui-btn-fluid layui-bg-cyan">提交</button>
    </div>
</div>

<script>
    $(function(){
        GetPowers();
    });

    function GetPowers(){
        var url = '/handler/permission/getPowerList';
        var data = {page:1,pagesize:99999};
        dink.post(url,data,function(res){
            if(res.ret == 1){
                var target = $('select[name=powers]');
                var html = '<option data-id="0" value="0">顶级权限</option>';
                $.each(res.data,function(i,ele){
                    html += '<option data-id="'+ele.id+'" value="'+ele.value+'">'+ele.name+'</option>';
                });
                target.html(html);
            }else{
                layer.msg('未获取到数据');
            }
        });
    }
</script>